<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <meta charset="utf-8" />--%>
<%--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">--%>
<%--    <!-- 引入 Bootstrap -->--%>
<%--    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>--%>
<%--    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">--%>
<%--    <!-- 引入 font-awesome -->--%>
<%--    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">--%>
<%--    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>


<%--    <style>--%>
<%--        body {--%>
<%--            font-family: "Segoe UI", Roboto, sans-serif;--%>
<%--            background: #f5f7fa;--%>
<%--        }--%>

<%--        .navbar-inverse {--%>
<%--            background: linear-gradient(to right, #2c3e50, #4ca1af);--%>
<%--            border: none;--%>
<%--            border-radius: 0;--%>
<%--        }--%>

<%--        .navbar-inverse .navbar-nav > li > a,--%>
<%--        .navbar-inverse .navbar-brand {--%>
<%--            color: #ffffff;--%>
<%--        }--%>

<%--        .list-group-item {--%>
<%--            border: none;--%>
<%--            border-radius: 0;--%>
<%--            padding: 14px 20px;--%>
<%--            font-size: 16px;--%>
<%--            transition: all 0.3s ease;--%>
<%--        }--%>

<%--        .list-group-item:hover {--%>
<%--            background-color: #e8f0fe;--%>
<%--            color: #007bff;--%>
<%--        }--%>

<%--        .list-group-item.active {--%>
<%--            background-color: #007bff;--%>
<%--            border-color: #007bff;--%>
<%--            color: white !important;--%>
<%--        }--%>

<%--        iframe {--%>
<%--            background: #ffffff;--%>
<%--            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);--%>
<%--            border-radius: 6px;--%>
<%--        }--%>

<%--        .sidebar {--%>
<%--            background-color: #ffffff;--%>
<%--            border-right: 1px solid #ddd;--%>
<%--            height: 100%;--%>
<%--            padding: 0;--%>
<%--            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);--%>
<%--        }--%>
<%--    </style>--%>

<%--    <script type="application/javascript">--%>
<%--        function change(url, index) {--%>
<%--            $(".list-group-item").removeClass("active");--%>
<%--            $(".list-group-item").eq(index).addClass("active");--%>
<%--            $("iframe").attr("src", url);--%>
<%--        }--%>
<%--    </script>--%>
<%--</head>--%>
<%--<body>--%>
<%--<nav class="navbar navbar-inverse">--%>
<%--    <div class="container-fluid">--%>
<%--        <ul class="nav navbar-nav navbar-left">--%>
<%--            <li><a style="font-size: 22px;"><i class="fa fa-cogs"></i> 宿舍管理系统 - 系统管理员</a></li>--%>
<%--        </ul>--%>
<%--        <ul class="nav navbar-nav navbar-right">--%>
<%--            <li><a><i class="fa fa-user"></i> 欢迎您, ${systemAdmin.name}</a></li>--%>
<%--            <li><a href="/account?method=logout"><i class="fa fa-sign-out"></i> 安全退出</a></li>--%>
<%--        </ul>--%>
<%--    </div>--%>
<%--</nav>--%>

<%--<div class="container-fluid">--%>
<%--    <div class="row">--%>
<%--        <!-- 左侧导航栏 -->--%>
<%--        <div class="col-sm-2 sidebar">--%>
<%--            <a href="javascript:void(0)" class="list-group-item active" onclick="change('/dormitoryAdmin?method=list',0)">--%>
<%--                <i class="fa fa-user-circle-o fa-fw"></i> 宿管管理--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/student?method=list',1)">--%>
<%--                <i class="fa fa-user-circle fa-fw"></i> 学生管理--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/building?method=list',2)">--%>
<%--                <i class="fa fa-home fa-fw"></i> 楼宇管理--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/dormitory?method=list',3)">--%>
<%--                <i class="fa fa-bed fa-fw"></i> 宿舍管理--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/moveout?method=list',4)">--%>
<%--                <i class="fa fa-address-card-o fa-fw"></i> 学生迁出登记--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/moveout?method=record',5)">--%>
<%--                <i class="fa fa-bookmark fa-fw"></i> 学生迁出记录--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/absent?method=list',6)">--%>
<%--                <i class="fa fa-bookmark-o fa-fw"></i> 学生缺寝记录--%>
<%--            </a>--%>
<%--        </div>--%>

<%--        <!-- 右侧内容展示区 -->--%>
<%--        <div class="col-sm-10">--%>
<%--            <iframe style="width: 100%; height: 600px; border: 0;" src="/dormitoryAdmin?method=list"></iframe>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>宿舍管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5.3.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Font Awesome 6.5.1 -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet">

    <!-- 可选：jQuery（仅当你有依赖） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

    <style>
        body {
            font-family: "Segoe UI", Roboto, sans-serif;
            background: #f5f7fa;
        }

        .navbar {
            background: linear-gradient(to right, #2c3e50, #4ca1af);
        }

        .navbar .nav-link,
        .navbar-brand {
            color: #ffffff !important;
        }

        .list-group-item {
            border: none;
            border-radius: 0;
            padding: 14px 20px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .list-group-item:hover {
            background-color: #e8f0fe;
            color: #007bff;
        }

        .list-group-item.active {
            background-color: #007bff;
            border-color: #007bff;
            color: white !important;
        }

        iframe {
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border-radius: 6px;
        }

        .sidebar {
            background-color: #ffffff;
            border-right: 1px solid #ddd;
            height: 100%;
            padding: 0;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
        }
    </style>

    <script>
        function change(url, index) {
            $(".list-group-item").removeClass("active");
            $(".list-group-item").eq(index).addClass("active");
            $("iframe").attr("src", url);
        }
    </script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><i class="fas fa-cogs"></i> 宿舍管理系统 - 系统管理员</a>
        <div class="d-flex ms-auto">
            <span class="navbar-text me-3"><i class="fas fa-user"></i> 欢迎您, ${systemAdmin.name}</span>
            <a class="nav-link" href="/account?method=logout"><i class="fas fa-sign-out-alt"></i> 安全退出</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <!-- 左侧导航栏 -->
        <div class="col-2 sidebar">
            <div class="list-group">
                <a href="javascript:void(0)" class="list-group-item list-group-item-action active" onclick="change('/dormitoryAdmin?method=list',0)">
                    <i class="fas fa-user-cog fa-fw"></i> 宿管管理
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="change('/student?method=list',1)">
                    <i class="fas fa-user-graduate fa-fw"></i> 学生管理
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="change('/building?method=list',2)">
                    <i class="fas fa-building fa-fw"></i> 楼宇管理
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="change('/dormitory?method=list',3)">
                    <i class="fas fa-bed fa-fw"></i> 宿舍管理
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="change('/moveout?method=list',4)">
                    <i class="fas fa-id-card fa-fw"></i> 学生迁出登记
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="change('/moveout?method=record',5)">
                    <i class="fas fa-book fa-fw"></i> 学生迁出记录
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" onclick="change('/absent?method=list',6)">
                    <i class="fas fa-exclamation-triangle fa-fw"></i> 学生缺寝记录
                </a>
            </div>
        </div>

        <!-- 右侧内容展示区 -->
        <div class="col-10">
            <iframe style="width: 100%; height: 600px; border: 0;" src="/dormitoryAdmin?method=list"></iframe>
        </div>
    </div>
</div>
</body>
</html>
